<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--<!DOCTYPE html>-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--    百度地图-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>发布房源-基本信息</title>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=1AkhOGKcEuwGawEEPaNfPHZECM0CRLNr"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/footer.css}">
    <link rel="stylesheet" th:href="@{/airent/css/issuehouse.css}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
    <link rel="icon" th:href="@{airent/common/imgs/icon.ico}" type="images/x-ico}"/>


    <!-- kartik-v-bootstrap -->
    <link rel="stylesheet" th:href="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/css/fileinput.min.css}"
          type="text/css">
    <link rel="stylesheet"
          th:href="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/explorer-fas/theme.min.css}">
    <!--    影响页面加载速度，暂时不知道有什么用处 注掉-->
    <!--    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">-->

    <style>

        #container {
            overflow: auto;
            width: 100%;
            height: 500px;
            margin: 50px 200px 0px 50px;
            /*padding: ;*/
            font-family: "微软雅黑";
        }

        #left {
            margin-left: 200px;
        }

    </style>
    <script src="/airent/js/MyBaiDuJS.js"></script>

</head>
<body>
<div id="app">
    <!-- 导航栏 -->
    <div th:replace="~{head/topbar::topBar(activeUri = 'release')}"></div>
    <!-- 发布房源 - 开始 -->
    <div class="issuehouse">

        <div class="big-tit">
            <div class="tit">发布出售房源</div>
            <div class="sub-tit">填写信息，Airent会尽快与您取得联系</div>
        </div>
        <div id="step-item-one" style="display: block;">
            <div class="inside-item">
                <div class="item-one" style="color: #01bc6a; border-bottom: 2px solid #01bc6a;">1.提交基本信息</div>
                <div class="item-two">2.提交详细信息</div>
            </div>
        </div>

        <div id="step-item-two" style="display: none;">
            <div class="inside-item">
                <div class="item-one">1.提交基本信息</div>
                <div class="item-two" style="color: #01bc6a; border-bottom: 2px solid #01bc6a;">2.提交详细信息</div>
            </div>
        </div>


        <div class="m-form">
            <!-- 第一个表单 - 开始 -->
            <div id="form-box-one" style="display: block;" class="row">
                <div class="col-2"></div>
                <div class="col-6 float-left" id="left">
                    <div class="midd-box">
                        <div class="row">
                            <!-- <div class="col-md-11">
                                 <form class="form-inline">
                                     <div class="form-group">
                                         <label for="usr" class="label-cha">姓名:</label>
                                         <input type="text" class="form-control all-input"
                                                style="width: 300px;">
                                     </div>
                                 </form>
                             </div>-->

                            <div class="col-md-11">
                                <form class="form-inline">
                                    <div class="form-group">
                                        <label for="usr" class="label-cha">手机号:</label>
                                        <input type="text" class="form-control all-input" v-model="tel"
                                               style="width: 300px;" maxlength="11"
                                               oninput="value=value.replace(/[^\d]/g,'')"
                                               placeholder="请输入您的手机号(必填)"
                                               @blur="VerifyPhone"
                                               id="tel">
                                        <span class="text-danger" v-if="telStatus==2">
                                            &nbsp;&nbsp;&nbsp;号码格式不正确
                                        </span>
                                        <span class="text-danger" v-if="telStatus==1">
                                            &nbsp;&nbsp;&nbsp;输入不能为空
                                        </span>
                                        <span class="text-success" v-if="telStatus==3">
                                            <svg width="24" height="24" viewBox="0 0 16 16" class="bi bi-check-circle"
                                                 fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd"
                                                      d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                                                <path fill-rule="evenodd"
                                                      d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
                                                </svg>
                                        </span>

                                    </div>

                                </form>
                            </div>

                            <div class="col-lg-11">
                                <form class="form-inline">
                                    <div class="form-group">
                                        <div class="row">
                                            <!--                                        <p>-->
                                            <!--                                            <button class="btn btn-primary" id="btn1">显示选中区域</button>-->
                                            <!--                                        </p>-->
                                            <label for="area-select-box" class="label-cha">选择地址:</label>
                                            <div id="area-select-box" class="col-9 data-input"></div>
                                            <small>
                                                <div>
                                                    <a class="text-info reply_btn" data-toggle="modal"
                                                       data-target="#myModal">
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;可使用地图点击红点选择详细地址
                                                    </a>
                                                </div>
                                            </small>
                                        </div>

                                        <!--                                        <div class="container" style="padding-top: 20px;">-->
                                        <!--                                            <p>-->
                                        <!--                                                <button class="btn btn-primary" id="btn2">选择区域</button>-->
                                        <!--                                            </p>-->
                                        <!--                                            <div id="area-select"></div>-->
                                        <!--                                        </div>-->
                                    </div>
                                </form>
                            </div>

                            <div class="col-md-11">
                                <form class="form-inline">
                                    <div class="form-group data-input">
                                        <label for="usr" class="label-cha">小区名称:</label>
                                        <input id="houseGroup" type="text" class="form-control all-input"
                                               v-model="villageName" placeholder="请输入小区名称(必填，限中文)"
                                               style="width: 300px;" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))">
                                    </div>
                                </form>
                            </div>

                            <div class="col-md-11">


                                <form class="form-inline">
                                    <div class="form-group" @change="MyAddress">
                                        <label for="usr" class="label-cha">具体门牌号:</label>
                                        <input type="text" class="form-control all-input" v-model="dong"  maxlength="3"
                                               style="width: 100px;"  oninput="this.value=this.value.replace(/[^0-9]+/,'')">
                                        <label for="usr" style="margin-right: 5px;">栋/幢</label>
                                        <input type="text" class="form-control all-input" v-model="danyuan" maxlength="3"
                                               style="width: 100px;"  oninput="this.value=this.value.replace(/[^0-9]+/,'')">
                                        <label for="usr" style="margin-right: 5px;">单元</label>
                                        <input type="text" class="form-control all-input" v-model="shi" maxlength="5"
                                               style="width: 100px;"  oninput="this.value=this.value.replace(/[^0-9]+/,'')">
                                        <label for="usr" style="margin-right: 5px;">室</label>
                                    </div>
                                </form>
                            </div>

                            <div class="col-md-11">
                                <form class="form-inline">
                                    <div class="form-group">
                                        <label for="usr" class="label-cha">出租类型:</label>
                                        <select class="form-control all-input" v-model="rentType">
                                            <option value="合租">合租</option>
                                            <option value="整租">整租</option>
                                        </select>

                                    </div>
                                </form>
                            </div>

                            <div class="col-md-11">
                                <form class="form-inline">
                                    <div class="form-group">
                                        <label for="usr" class="label-cha">押付方式:</label>
                                        <select class="form-control all-input" v-model="payment">
                                            <option value="不需要押金">不需要押金</option>
                                            <option value="押一付一">押一付一</option>
                                            <option value="押一付二">押一付二</option>
                                            <option value="押一付三">押一付三</option>
                                            <option value="其他">其他</option>
                                        </select>
                                    </div>
                                </form>
                            </div>

                            <div class="col-md-11">
                                <form class="form-inline">
                                    <div class="form-group">
                                        <label for="usr" class="label-cha">期望租金:</label>
                                        <input type="text" class="form-control all-input" v-model="price"
                                               placeholder="单位：元（必填）"
                                               style="width: 300px;"
                                               oninput="this.value=this.value.replace(/[^0-9]+/,'')"

                                        >
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="m-submit">
                        <div class="submit-wrap">
                            <button type="button" id="showHidde_one" class="btn btn-success btn-lg">下一步</a></button>
                        </div>
                    </div>
                </div>
                <div class="col-3 float-left">
                    <div id="container"></div>
                </div>
                <div class="col-1"></div>
            </div>
            <!-- 第一个表单 - 结束 -->

            <!-- 第二个表单 - 开始 -->
            <div id="form-box-two" style="display: none;">
                <div class="midd-box">
                    <div class="row">
                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">房源标题:</label>
                                    <input type="text" class="form-control all-input" v-model="houseResource"
                                           placeholder="必填(限汉字)" style="width: 300px;" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))">
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">房屋面积:</label>
                                    <input type="text" class="form-control all-input" v-model="houseMeasure"
                                           placeholder="单位：m^2" style="width: 300px;"
                                           oninput="this.value=this.value.replace(/[^0-9]+/,'')">
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group" @change="selectHouseType">
                                    <label for="usr" class="label-cha">户型:</label>
                                    <select class="form-control all-input" v-model="house_s">
                                        <option value="一">一</option>
                                        <option value="二">二</option>
                                        <option value="三">三</option>
                                        <option value="四">四</option>
                                        <option value="五">五</option>
                                        <option value="其他">其他</option>
                                    </select>
                                    <label for="usr" style="margin-right: 5px;">室</label>
                                    <select class="form-control all-input" v-model="house_t">
                                        <option value="零">零</option>
                                        <option value="一">一</option>
                                        <option value="二">二</option>
                                        <option value="三">三</option>
                                        <option value="四">四</option>
                                        <option value="五">五</option>
                                        <option value="其他">其他</option>
                                    </select>
                                    <label for="usr" style="margin-right: 5px;">厅</label>
                                    <select class="form-control all-input" v-model="house_w">
                                        <option value="零">零</option>
                                        <option value="一">一</option>
                                        <option value="二">二</option>
                                        <option value="三">三</option>
                                        <option value="四">四</option>
                                        <option value="其他">其他</option>
                                    </select>
                                    <label for="usr" style="margin-right: 5px;">卫</label>
                                    <input type="hidden">
                                </div>
                                <span class="text-primary">
                                            &nbsp;&nbsp;&nbsp;(必选)
                                        </span>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">楼层:</label>
                                    <select class="form-control all-input" v-model="floor">
                                        <option value="1">低层</option>
                                        <option value="2">中层</option>
                                        <option value="3">高层</option>
                                    </select>

                                </div>
                            </form>
                        </div>


                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">屋间朝向:</label>
                                    <select class="form-control all-input" v-model="orientation">
                                        <option value="东">东</option>
                                        <option value="西">西</option>
                                        <option value="南">南</option>
                                        <option value="北">北</option>
                                    </select>
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">有无电梯</label>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" v-model:name="elvator"
                                               id="inlineRadio1" value="1">
                                        <label class="form-check-label" for="inlineRadio1">有</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" v-model:name="elvator"
                                               id="inlineRadio2" value="0">
                                        <label class="form-check-label" for="inlineRadio2">无</label>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11" th:required="true">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">房源设备</label>
                                    <div class="form-check form-check-inline" v-for="item in items"
                                         v-if="item.itemName!='电梯'">
                                        <input class="form-check-input" type="checkbox" v-bind:id="'item'+item.itemId"
                                               v-model="itemsCollection"
                                               v-bind:value="item.itemId">
                                        <label class="form-check-label" v-bind:for="'item'+item.itemId">{{item.itemName}}</label>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">额外费用</label>
                                    <div class="form-check form-check-inline" v-for="extra in extras">
                                        <input class="form-check-input" type="checkbox"
                                               v-bind:id="'extra'+extra.extraId" v-model="extrasCollection"
                                               v-bind:value="extra.extraId">
                                        <label class="form-check-label" v-bind:for="'extra'+extra.extraId">{{extra.extraName}}</label>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">起租日期:</label>
                                    <input type="date"  min="01-01" max="2020-12-31" class="form-control all-input" v-model="date" id="usr"
                                           style="width: 300px;">
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form class="form-inline">
                                <div class="form-group">
                                    <label for="comment" class="label-cha">房源描述:</label>
                                    <textarea class="form-control all-input" rows="5" id="comment" v-model="content"
                                              style="width: 300px;"></textarea>
                                </div>
                            </form>
                        </div>

                        <div class="col-md-11">
                            <form enctype="multipart/form-data" action="/house/addImg" method="post">
                                <div class="form-group">
                                    <label for="usr" class="label-cha">房源照片:</label>
                                    <small>
                                        必选
                                    </small>
                                    <div class="file-loading">
                                        <input id="input-703" name="imgs" type="file" multiple>
                                    </div>
                                </div>

                            </form>

                        </div>

                    </div>
                </div>

                <div class="m-submit">
                    <div class="submit-wrap">
                        <button type="button" id="showHidde_two" class="btn btn-success btn-lg">上一步</a></button>
                        <!-- <button type="button" class="btn btn-success btn-lg">提交委托</button> -->

                        <button type="button" @click="addHoues" class="btn btn-success btn-lg" data-toggle="modal"
                                data-target="#exampleModalCenter">
                            提交委托
                        </button>

                        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
                             aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalCenterTitle"
                                            v-text="submitInformation"></h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body" style="font-size: 20px;">
                                        是否继续上传
                                    </div>
                                    <div class="modal-footer">
                                        <!--                                         <button type="button" class="btn btn-secondary " data-dismiss="modal" ></button>-->
                                        <a class="btn btn-secondary" href="/index.html">去首页</a>
                                        <a class="btn btn-primary" href="/issuehouse.html"
                                           v-if="submitInformation == 'success'">上传</a>
                                        <button type="button" class="btn btn-secondary " data-dismiss="modal"
                                                v-if="submitInformation != 'success'">重新上传
                                        </button>

                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>

            </div>

            <!-- 第二个表单 - 结束 -->
        </div>
    </div>
    <!-- 发布房源 - 结束 -->

    <!-- 底部 -->
    <div class="footer">
        <div class="wrapper">
            <!-- 3-1 第一列 -->
            <div class="title">
                <div class="fl">
                    <ul class="nav nav-tabs">
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">加入我们</a></li>
                        <li><a href="#">隐私声明</a></li>
                        <li><a href="#">网站地址</a></li>
                        <li><a href="#">友情链接</a></li>
                    </ul>
                </div>
                <div class="fr">
                    客服电话 ：0101 0101
                </div>
            </div>


            <!-- 3-2 第二列 -->
            <div class="middle-box">
                <div class="mid-up">
                    <div class="tele-logo"></div>
                    <div class="tele-word">
                        留言给Airent:
                    </div>
                    <div class="tele-num">
                        12123321@123.com
                    </div>
                </div>
                <div class="mid-down">
                    <div class="dizhi">
                        地理位置<br>
                        苏州市工业园区新平街388号腾飞创新园14号楼<br>
                        邮编：215000
                    </div>
                </div>
            </div>

            <!-- 3-3 第三列 -->
            <div class="bottom">
                <div class="copyright">
                    airen有限公司 | 2020airent网版权所有 | 营业执照<br>
                    违法举报电话 ：0101 0101 违法和不良信息举报邮箱 ：384905931@qq.com
                </div>
                <div class="copybottom">
                    网上有害信息举报专区
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/piexif.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/sortable.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/purify.min.js}"></script>
<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js}"></script>
<!--<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/fileinput.min.js}"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.0.1/js/fileinput.min.js"></script>

<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/locales/LANG.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/locales/zh.js}"
        type="text/javascript"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/fas/theme.min.js}"
        type="text/javascript"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/explorer-fas/theme.min.js}"
        type="text/javascript"></script>
<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
<!--    地区选择插件-->
<script type="text/javascript" th:src="@{/airent/plugins/city-area/JAreaData.js}"></script>
<script type="text/javascript" th:src="@{/airent/plugins/city-area/JAreaSelect.js}"></script>

<script>

    var vueApp = new Vue({
        el: "#app",
        data: {
            // name: "",
            tel: "",//预留电话
            province: "",//所在省
            city: "",//所在城市
            area: "",//所在地区
            villageName: "",//小区名字
            detailedAddress: "",
            rentType: "",//住房类型（合租/整租）
            price: null,//价格
            dong: "",//栋
            danyuan: "",//单元
            shi: "",//室
            houseCoordinateX: "",//x坐标
            houseCoordinateY: "",//y坐标
            orientation: "",//房屋朝向
            items: [],//房屋设施
            extras: [],//缴费
            floor: "",//楼层
            house_s: "",//室
            house_t: "",//厅
            house_w: "",//卫
            houseType: '',
            houseMeasure: "",//面积
            houseResource: "",//标题
            metro: "",
            elvator: 3,
            itemsCollection: [],
            extrasCollection: [],
            date: "",
            imgs: [],//上传图片,
            imgPath: [],
            content: '',//房源描述
            payment: '',//押付方式
            telStatus: 0,
            submitInformation: ''

        },
        methods: {
            addHoues: function () {
                let result = this.$options.methods.judgeSpace();
                if (!result) {
                    // alert("请填写必要信息");
                    vueApp.submitInformation = '上传失败！请填写必要信息'
                    return false;
                }
                if (vueApp.imgPath == null || vueApp.imgPath ==''){
                    vueApp.submitInformation = '请至少上传一张图片！';
                    return false;
                }

                let url = '/houseUser/issueHouse',
                    data = {
                        tel: vueApp.tel,//预留电话
                        houseCity: this.city,
                        houseArea: this.area,
                        villageName: this.villageName,//小区名字
                        detailedAddress: this.detailedAddress,//所在单元,需要写个计算方法
                        rentType: this.rentType,//住房类型（合租/整租）
                        rentPrice: this.price,//价格
                        houseCoordinateX: this.houseCoordinateX,//x坐标
                        houseCoordinateY: this.houseCoordinateY,//y坐标
                        orientation: this.orientation,//房屋朝向
                        floor: this.floor,//楼层
                        houseType: this.houseType,
                        houseMeasure: this.houseMeasure,//面积
                        houseResource: this.houseResource,//标题
                        itemsCollections: vueApp.itemsCollection,
                        extrasCollections: vueApp.extrasCollection,
                        liveDate: this.date,
                        imgsPathes: this.imgPath,
                        content: this.content,
                        elvator: this.elvator,
                        payment: this.payment,
                    }
                $.ajax({
                    type: "get",
                    url: url,
                    data: data,//JSON.stringify(data)
                    contentType: "application/json",
                    // contentType: "application/json",
                    success: function (data) {
                        vueApp.submitInformation = data
                    }
                });
            },
            addImgs: function () {
                var formData = new FormData();

                var pic = document.getElementById("goodsDetailPic").files;

                for (let j = 0; j < pic.length; j++) {
                    formData.append('goodsPhoto[]', pic[j]);

                }
            },
            VerifyPhone: function () {
                let phone_reg = /^13[0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}|17[0-9]{1}[0-9]{8}$|14[0-9]{1}[0-9]{8}/;
                let tel_reg = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
                if (vueApp.tel == null || vueApp.tel == '') {
                    vueApp.telStatus = 1;
                    return false;
                }
                if (!phone_reg.test(vueApp.tel) && !tel_reg.test(vueApp.tel)) {
                    vueApp.telStatus = 2;
                    // phone.focus();
                    return false;
                } else {
                    vueApp.telStatus = 3;
                }
            },
            judgeSpace: function () {
                if (vueApp.tel == null || vueApp.tel == '' || vueApp.villageName == null || vueApp.villageName == '' ||
                    vueApp.price == 0 || vueApp.houseType == null || vueApp.houseType == '' || vueApp.houseResource == ''
                    || vueApp.houseResource == null || vueApp.telStatus != 3
                ) {
                    return false;
                } else {
                    return true;
                }
            }
            ,
            MyAddress: function () {
                this.detailedAddress = this.dong + '栋' + this.danyuan + '单元' + this.shi + '室'
                let s = this.detailedAddress.substring(0, 1)
                while (s == '栋' || s == '单' || s == '室' || s == '元') {
                    this.detailedAddress = this.detailedAddress.substring(1, this.detailedAddress.length)
                    s = this.detailedAddress.substring(0, 1)
                }

                // return this.detailedAddress
            }
            ,
            selectHouseType: function () {
                this.houseType = this.house_s + "室" + this.house_t + "厅" + this.house_w + "卫"
                // return this.houseType
            }


        },

        created() {

            let _this = this
            let url1 = '/items/showHouseItems'
            let url2 = '/extra/showHouseExtra'
            //查询所有的设施
            $.get(url1, '', function (data) {
                _this.items = data
            })
            // 查询所有缴费
            $.get(url2, function (data) {
                _this.extras = data
            })
        }


    })
</script>
<!-- div切换的js -->
<script type="text/javascript">
    function show_hidden(obj) {

        if (obj.style.display == "block") {
            obj.style.display = "none";
        } else {
            obj.style.display = "block";
        }
    }

    var sh1 = document.getElementById("showHidde_one");
    var sh2 = document.getElementById("showHidde_two");

    sh1.onclick = function () {

        var div1 = document.getElementById("form-box-one");
        var div2 = document.getElementById("form-box-two");

        var biao1 = document.getElementById("step-item-one");
        var biao2 = document.getElementById("step-item-two");


        show_hidden(div1);
        show_hidden(div2);

        show_hidden(biao1);
        show_hidden(biao2);
        return false;
    }

    sh2.onclick = function () {

        var div1 = document.getElementById("form-box-one");
        var div2 = document.getElementById("form-box-two");

        var biao1 = document.getElementById("step-item-one");
        var biao2 = document.getElementById("step-item-two");

        show_hidden(div1);
        show_hidden(div2);

        show_hidden(biao1);
        show_hidden(biao2);
        return false;
    }


</script>

<script>

    $(document).ready(function () {
        $("#input-703").fileinput({
                theme: 'fas',
                language: 'zh',
                uploadUrl: "/houseUser/upload", // 服务器端上传处理程序
                maxFileCount: 5,
                /*minFileCount: 1, //最小上传文件数为1
                 //最大上传文件数为5
                multiple: false, //异步上传*/
                // uploadAsync: false,
                // showUpload : false,

                showRemove : false, //显示移除按钮
                // showPreview : true, //是否显示预览
                // showCaption: false,//是否显示标题
                // autoReplace : true,
                minFileCount: 0,
                uploadAsync: true,
                maxFileCount: 10,//最大上传数量
                browseOnZoneClick: true,
                msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值！",
                enctype: 'multipart/form-data',
                // overwriteInitial: false,//不覆盖已上传的图片
                allowedFileExtensions: ["jpg", "png", "gif"],
                browseClass: "btn btn-primary", //按钮样式
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                layoutTemplates: {
                    // actionDelete: '', //去除上传预览的缩略图中的删除图标
                    // actionUpload:'',//去除上传预览缩略图中的上传图片；
                    actionZoom: ''   //去除上传预览缩略图中的查看详情预览的缩略图标。
                },
            },
        )
    }).on('fileuploaded', function (event, data, previewId, index) {//异步上传成功结果处理
        //图片路径 data.response.success
        // vueApp.imgPath=data.response.success
        addPath(data.response.success)
    }).on('fileerror', function (event, data, msg) {//异步上传失败结果处理
        alert(data.response.success)
    }).on('fileuploaderror', function (event, data, msg) {//异步上传失败结果处理
        alert(data.response.success)
    })


    function addPath(path) {
        let list = vueApp.imgPath
        list.push(path)
        vueApp.imgPath = list
    }

</script>
<!--地区选择-->
<script type="text/javascript">

    var area = $("#area-select-box").JAreaSelect({
        prov: 1,
        city: 72,
        dist: 2839,
    });


    $("#btn2").on("click", function () {
        $("#area-select").JAreaSelect2({
            prov: 1,
            city: 72,
            dist: 2839,

            callback: function (data) {
                console.log(data);
                $("#btn2").html(data.address);
            }
        });
    });
</script>
<!--创建地图实例-->
<script type="text/javascript">
    var map = new BMapGL.Map('container'); // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
    var local = new BMapGL.LocalSearch(map, {
        renderOptions: {map: map}
    });

    $(".data-input").on('change', function () {
        console.log(area.getAreaString());
        let inputPath = area.getAreaString().toString()
        // console.log(area.getAreaId());
        let inputHouse = $("#houseGroup").val()
        let addressInfor = area.getAreaString();
        vueApp.city = addressInfor[0] + addressInfor[1];
        vueApp.area = addressInfor[2]
        local.search(inputPath + inputHouse);
    });
    map.addEventListener('click', function (e) {
        console.log('点击位置经纬度：' + e.point.lng + ',' + e.point.lat);
        vueApp.houseCoordinateX = e.point.lng
        vueApp.houseCoordinateY = e.point.lat
    });

</script>
</body>
</html>
